<script setup>
import {
  IconThumbUp,
  IconShareInternal,
  IconMore
} from '@arco-design/web-vue/es/icon'
import ZlcodeH2 from '@/components/zlcode/title/ZlcodeH2.vue'
import ZlcodeH3 from '@/components/zlcode/title/ZlcodeH3.vue'
import { baseURL } from '@/utils/request.js'

import { ref } from 'vue'

const drawer = ref(false)
const openDrawer = () => {
  drawer.value = !drawer.value
}

defineProps({
  imgUrl: {
    type: String
  },
  title: {
    type: String
  },
  createUserImgUrl: {
    type: String
  },
  createUserName: {
    type: String
  },
  contentTitle: {
    type: String
  },
  content: {
    type: String
  },
  style: {
    type: Object
  },
  moduleClass: {
    type: Object
  },
  href: {
    type: String,
    default() {
      return '#'
    }
  }
})
const to = (href) => {
  if (href.startsWith('http://') || href.startsWith('https://')) {
    window.open(href, '_blank')
  } else if (href === '#') {
    ElMessage.warning('该网站还未开发完成哦，请耐心等待吧!')
  } else {
    // router.push(href)
    window.open(href, '_blank')
  }
}

// 分享链接(本质是复制)
const share = (obj) => {
  let href = obj.href
  const content = obj.content
  // 没有http://并且没有https://就主动加上我们的域名
  if (!href.startsWith('http://') && !href.startsWith('https://')) {
    if (href === '#') {
      href = ''
    }
    href = baseURL + href
  }
  console.log(href)

  const text = '链接分享：' + content + ' ' + href

  // navigator clipboard 需要https等安全上下文
  if (navigator.clipboard && window.isSecureContext) {
    // navigator clipboard 向剪贴板写文本
    navigator.clipboard.writeText(text)
    ElMessage.success('复制成功')
  } else {
    // 创建text area
    let textArea = document.createElement('textarea')
    textArea.value = text
    // 使text area不在viewport，同时设置不可见
    textArea.style.position = 'absolute'
    textArea.style.opacity = 0
    textArea.style.left = '-999999px'
    textArea.style.top = '-999999px'
    document.body.appendChild(textArea)
    textArea.focus()
    textArea.select()
    new Promise((res, rej) => {
      // 执行复制命令并移除文本框
      document.execCommand('copy') ? res() : rej()
      textArea.remove()
      ElMessage.success('复制成功')
    })
  }
}
</script>

<template>
  <el-drawer
    v-model="drawer"
    :title="title"
    :lock-scroll="false"
    direction="ttb"
    size="100%"
  >
    <zlcode-h2>Hi 你好呀！</zlcode-h2>
    <zlcode-h3
      >这个页面可没有多少人会发现哦，欢迎你来到 {{ title }} 秘密页面!</zlcode-h3
    >
    <a-result status="404" subtitle="秘密页面正在加班加点创作中哦！">
      <template #extra>
        <a-space>
          <a-button type="primary" @click="openDrawer">Exit</a-button>
        </a-space>
      </template>
    </a-result>
  </el-drawer>

  <a-card :style="[style]" hoverable :class="['card-demo', moduleClass]">
    <template #actions>
      <span class="icon-hover"> <IconThumbUp /> </span>
      <span class="icon-hover" @click="share({ href: href, content: content })">
        <IconShareInternal />
      </span>
      <span class="icon-hover" @click="openDrawer"> <IconMore /> </span>
    </template>
    <template #title>
      <div
        :style="{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }"
      >
        <span
          :style="{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            color: '#1D2129'
          }"
        >
          <a-avatar
            :size="30"
            shape="square"
            :style="{
              'border-radius': '23%',
              'background-color': 'rgb(0,0,0,0)'
            }"
          >
            <img :src="imgUrl" alt="avatar" />
          </a-avatar>
          <a-typography-text style="padding: 10px">{{
            title
          }}</a-typography-text>
        </span>
        <el-link :underline="false" @click="to(href)" type="primary"
          >Go to</el-link
        >
      </div>
    </template>

    <a-card-meta :title="contentTitle" :description="content">
      <template #avatar>
        <div
          :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
        >
          <a-avatar
            :size="24"
            :style="{ marginRight: '8px' }"
            :image-url="createUserImgUrl"
          >
            ZLCode
          </a-avatar>
          <a-typography-text>开发者：{{ createUserName }}</a-typography-text>
        </div>
      </template>
    </a-card-meta>
  </a-card>
</template>
<style scoped>
img {
  border-radius: 23%;
}
.card-demo:hover {
  transform: translateY(-4px);
}
.card-demo {
  width: 360px;
  transition-property: all;
}
</style>
